<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 300px;
        height: 300px;
        margin: 100px auto;
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div><input type="text" id="input" placeholder="监听局部粘贴" /></div>
      <div style="margin-top: 10px">
        <textarea
          id="eventMd"
          name="1"
          id=""
          cols="30"
          rows="10"
          onclick="mouse('鼠标点击事件')"
          onfocus="mouse('鼠标获取焦点事件')"
          onblur="mouse('鼠标失去焦点事件')"
          onmouseover="mouse('鼠标经过触发事件')"
          onmouseout="mouse('鼠标离开触发事件')"
          onblur="mouse('鼠标失去焦点事件')"
          onmousemove="mouse('鼠标移动触发')"
          onmousedown="mouse('鼠标按下触发')"
          onmouseup="mouse('鼠标弹起触发')"
          placeholder="监听粘贴事件"
        ></textarea>
      </div>
      <div
        class="box1"
        onmouseover="mouse('鼠标经过触发事件',this,1)"
        onmouseout="mouse('鼠标离开触发事件',this,0)"
      ></div>
    </div>
  </body>
  <script>
    /* 鼠标事件 */
    const mouse = (str, obj, e) => {
      console.log(str)
      if (!obj) return
      if (e === 1) obj.style.backgroundColor = 'red'
      else if (e === 0) obj.style.backgroundColor = 'skyblue'
    }
  </script>
  <script>
    /* 粘贴事件 */
    //   局部监听
    const input = document.querySelector('#input')
    input.addEventListener('paste', function (event) {
      const content = event.clipboardData.getData('Text')
      console.log('局部监听粘贴:', content)
    })
    // 全局监听
    document.addEventListener('paste', function (event) {
      const content = event.clipboardData.getData('Text')
      console.log('监听粘贴:', content)
    })

    /* 鼠标事件 */
    // 1.点击事件
    const eventMd = document.querySelector('#eventMd')
    eventMd.addEventListener('onmouseover', function (event) {
      // const content = event.clipboardData.getData('Text')
      console.log('鼠标点击:', event)
    })
  </script>
</html>
